<template>
  <div>
    <Header :type="'screening'" @tag="commentAPI" @reset="reset">
      <div class="head-tit">
        内容筛选
      </div>

      <div class="head-operation">
        <span class="head-label">
          商品名称：
        </span>
        <el-input
          v-model="input"
          placeholder="请输入"
          size="small"
          class="head-input"
        >
        </el-input>
        <span class=" head-label">
          选择评价：
        </span>
        <el-select
          v-model="type"
          size="small"
          class="head-input"
          placeholder="默认好评"
        >
          <el-option
            v-for="item in optionList9"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span class="head-label">
          选择星级：
        </span>
        <el-select
          v-model="star"
          size="small"
          class="head-input"
          placeholder="请选择"
        >
          <el-option
            v-for="item in optionList10"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <span class="head-label">
          订单类型：
        </span>
        <el-select
          v-model="marketType"
          size="small"
          class="head-input"
          placeholder="请选择"
        >
          <el-option
            v-for="item in optionList2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="head-operation">
        <span class="head-label">
          选择时间：
        </span>
        <div class="head-time">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
            style="width:100%;"
            size="small"
          >
          </el-date-picker>
        </div>
      </div>
    </Header>
    <div class="table-nav">
      <div class="nav-title-one">评论内容</div>
      <div class="nav-title">评论星级</div>
      <div class="nav-title">评论时间</div>
      <div class="nav-title">买家</div>
      <div class="nav-title">操作</div>
    </div>
    <div v-if="shows" class="nav-hiden">
      <span>暂无数据</span>
    </div>
    <Main v-else :type="'ordinary'" :footer-lock="totals > 10">
      <div class="list-table-content">
        <div v-for="item in mementCode" :key="item.id" class="table-body">
          <div class="nav">
            <ul>
              <li>
                <span>订单编号：{{ item.pay_order }}</span>
              </li>
              <li
                style="overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;"
              >
                <span>商品名称：</span>{{ item.goods_name }}
              </li>
            </ul>
            <ul>
              <li><span>商品规格：</span>{{ item.sku_type }}</li>
            </ul>
          </div>

          <div class="table-content">
            <div class="shopbox">
              <div style="margin-bottom:20px;">
                <span style="font-weight: bold;">买家评论:</span
                ><span style="margin-left: 8px;">{{ item.content || "" }}</span>
              </div>
              <div>
                <div>
                  <div style="font-weight: bold;float:left;">
                    商家回复:&nbsp;&nbsp;
                  </div>
                  <div style="float:left;width: 80%;">
                    {{ item.reply || "暂无文字回复" }}
                  </div>
                </div>
                <div
                  v-if="item.reply_pic ? true : false"
                  style="height:60px;width:60px;margin-left: 57px;"
                >
                  <img
                    :src="
                      $store.state.qiniu +
                        item.reply_pic +
                        $store.state.imgRotate
                    "
                    width="100%"
                    height="100%"
                  />
                </div>
              </div>
            </div>

            <div class="box">
              <el-rate v-model="item.star" :disabled="true"></el-rate>
            </div>
            <div class="box">
              <span>{{ item.create_time }}</span>
            </div>
            <div class="box" style="padding:0;">
              <div>
                <img
                  :src="
                    $store.state.qiniu + item.cover + $store.state.imgRotate
                  "
                  width="60px"
                  height="60px"
                />
              </div>
              <div>
                <span>{{ item.nick_name || "" }}</span>
              </div>
            </div>

            <div class="box">
              <el-button
                type="primary"
                size="mini"
                @click="reply(item.comment_id)"
                >回复</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </Main>
    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>
    <el-dialog
      title="回复提示框提示"
      :visible.sync="dialogVisiblea"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="商家回复" prop="content">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="图片回复" prop="picture">
          <div style="">
            <div id="container" class="up-pic">
              <el-button size="mini" style="position: relative;">
                <big>+</big>上传
                <input
                  id="upPic"
                  ref="inputUpload"
                  type="file"
                  multiple="multiple"
                  style="position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                    width: 62px;"
                  @change="inputUpload($event)"
                />
              </el-button>
              <!-- <span class='desc'>{{msg}}</span> -->
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Submit('form')">确定</el-button>
          <el-button @click="onSubmit('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as qiniu from "qiniu-js";
import { COMMENT, REPLY, UP_TOKEN } from "../../../service";

export default {
  data() {
    return {
      type: "",
      star: "",
      marketType: "",
      optionList: [
        { id: 1, name: "下单时间" },
        { id: 2, name: "支付时间" },
        { id: 3, name: "发货时间" }
      ],
      optionList9: [{ id: 1, name: "系统评价" }, { id: 2, name: "买家自评" }],
      optionList10: [
        { id: "", name: "全部" },
        { id: 1, name: "一星" },
        { id: 2, name: "二星" },
        { id: 3, name: "三星" },
        { id: 4, name: "四星" },
        { id: 5, name: "五星" }
      ],
      optionList2: [
        { id: "", name: "全部订单" },
        { id: "0", name: "普通订单" },
        { id: "1", name: "拼团订单" },
        { id: "2", name: "限时折扣订单" },
        { id: "3", name: "分销订单" },
        { id: "4", name: "积分消耗订单" },
        { id: "5", name: "砍价订单" },
        { id: "6", name: "零元抽奖订单" }
      ],
      shows: true,
      mementCode: [],
      commentCode: [],
      commenttime: [],
      getList: [],
      form: {
        content: ""
      },
      pictureCode: "",

      dialogVisiblea: false,

      select2: "",
      time: [],
      pages: 1,
      totals: 0,
      input: "",
      qnToken: ""
    };
  },
  created() {
    this.qiniuTag();
    this.commentAPI();
  },
  methods: {
    reset() {
      this.input = "";
      this.select1 = "";
      this.select2 = "";
      this.select3 = "";
      this.time = [];
      this.getList();
    },
    // 回复
    reply(id) {
      this.comment_id = id;
      this.dialogVisiblea = true;
    },
    // 跳页
    changes(page) {
      this.pages = page;
      this.commentAPI();
    },
    // 订单处理—— 订单评论
    async commentAPI() {
      await COMMENT({
        page: this.pages,
        pageshow: 10,
        name: this.input,
        type: this.type,
        star: this.star,
        market_type: this.marketType,
        stime: this.time[0],
        etime: this.time[1]
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          this.mementCode = data.list;
          if (data.list !== "") {
            this.shows = false;
          }
        } else {
          this.$message.error(msg);
        }
      });
    },
    // 回复
    Submit(form) {
      this.dialogVisiblea = false;
      this.$refs[form].validate(valid => {
        if (valid) {
          REPLY({
            reply: this.form.content,
            comment_id: this.comment_id,
            reply_pic: this.pictureCode
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "回复成功",
                type: "success"
              });
              this.commentAPI();
            }
          });
          this.$refs[form].resetFields();
        } else {
          return false;
        }
      });
    },
    onSubmit(form) {
      this.$refs[form].resetFields();
      this.dialogVisiblea = false;
    },
    // 上传
    inputUpload(e) {
      this.$message("正在上传！");
      let file = Array.prototype.slice.call(e.target.files);
      let that = this;
      file.forEach(ele => {
        let lock = this.beforeUpload(ele);
        if (!lock) {
          return;
        }
        let random1 = parseInt(Math.random() * 100000);
        let random2 = parseInt(Math.random() * 100000);
        let time = new Date().getTime();
        let d = ele.name.lastIndexOf(".");
        let hz = ele.name.substring(d);
        let fileName = "" + random1 + random2 + time + hz;
        let observable = qiniu.upload(ele, fileName, this.qnToken);
        observable.subscribe({
          next() {},
          // eslint-disable-next-line handle-callback-err
          error() {
            that.$message.error("上传失败！");
          },
          complete(res) {
            that.pictureCode = res.key;
            that.$message.success("上传成功！");
          }
        });
      });
      this.$refs.inputUpload.value = null;
    },
    async qiniuTag() {
      await UP_TOKEN().then(res => {
        let { data } = res;
        this.qnToken = data;
      });
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isSVG = file.type === "image/svg+xml";
      const isMP4 = file.type === "video/mp4";
      if (this.file_type === 1 && !isJPG && !isPNG && !isSVG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
        return false;
      }
      if (this.file_type === 2 && !isMP4) {
        this.$message.error("上传视频只能是 MP4 格式!");
        return false;
      }
      return true;
    }
  }
};
</script>
<style lang="scss" scoped>
.table-nav {
  display: flex;
  background: #ebecf0;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  font-weight: bold;
  padding-left: 58px;
  .nav-title-one {
    width: 24%;
    padding-left: 12px;
    box-sizing: border-box;
  }
  .nav-title {
    text-align: center;
    width: 15%;
  }
}
.nav-hiden {
  text-align: center;
  border-top: 1px solid gainsboro;
  height: 53px;
  padding-top: 18px;
  font-size: 12px;
  background: #fff;
  margin-left: 1px;
  text-align: center;
}
.list-table-content {
  color: #595961;
  font-size: 12px;
  overflow: hidden;
  .table-body {
    width: 100%;
    height: 100%;
    background: #fff;
    border-top: 16px solid #f2f2f2;
    padding-left: 58px;
    &:nth-child(1) {
      border-top: 0;
    }
    .nav {
      height: 120px;
      border-bottom: 1px solid #e8e8e8;
      padding-top: 26px;
      box-sizing: border-box;
      ul {
        font-size: 14px;
        display: flex;
        height: 36px;
        line-height: 36px;
        li {
          width: 28%;
          span {
            font-weight: bold;
          }
        }
      }
    }

    .table-content {
      display: flex;
      padding-top: 20px;
      min-height: 120px;
      .box {
        text-align: center;
        margin-top: 15px;
        width: 14%;
        padding-top: 32px;
      }
      .shopbox {
        width: 24%;
        margin-bottom: 20px;
        .shopboxf {
          margin-bottom: 16px;
          display: flex;
          .imgs {
            width: 70px;
            height: 70px;
          }
          ul {
            margin-left: 12px;
            .goods-name {
              font-weight: 700;
              font-size: 14px;
            }
            .goods-info {
              color: inherit;
              display: block;
              margin-top: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
